import React from 'react';
import Swiper from 'swiper';
import styles from './Example.css';

class Example extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      list : [
        'http://a.hiphotos.baidu.com/image/pic/item/e850352ac65c1038fbd24b08bb119313b17e8948.jpg',
        'http://c.hiphotos.baidu.com/image/pic/item/7af40ad162d9f2d3252dba25a0ec8a136327cc38.jpg',
        'http://b.hiphotos.baidu.com/image/pic/item/d50735fae6cd7b89af12a549062442a7d8330ef9.jpg',
        'http://f.hiphotos.baidu.com/image/pic/item/f11f3a292df5e0fec4e98ecb556034a85fdf7202.jpg',
        'http://e.hiphotos.baidu.com/image/pic/item/5243fbf2b21193130cbe6a7a6c380cd790238d7f.jpg',
        'http://g.hiphotos.baidu.com/image/pic/item/8694a4c27d1ed21b1074b72fa46eddc450da3fbe.jpg',
      ]
    }
  }

  componentDidMount() {
    let swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
        dynamicBullets: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

  render() {
    return (
      <div className={styles['swiper']+' swiper-container'}>
        <div className="swiper-wrapper">
          {
            this.state.list.map((item,index)=>{
              {/*return <img key={index} src={item} className={styles['swiper-slide']+' swiper-slide'}/>*/}
              return <div key={index} className={styles['swiper-slide']+' swiper-slide'}>
                <img key={index} src={item}/>
              </div>
            })
          }
        </div>
        <div className="swiper-pagination"></div>
        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>
        <div className="swiper-scrollbar"></div>
      </div>
    );
  }

}
export default Example;
